<script setup lang="ts" name="BpmnCommands">
import { storeToRefs } from 'pinia'
import { useModelerStore } from '@/store/bpmnProcess/modelerStore'
import { createNewDiagram } from '../../../utils'
import { useSettingStore } from '@/store/bpmnProcess/settingStore'
import EventEmitter from '@/utils/EventEmitter'

const settingStore = useSettingStore()

const { editor } = storeToRefs(settingStore)

const { canRedo, canUndo } = storeToRefs(useModelerStore())

const command = ref(null)

// 撤销
const undo = () => {
  command.value.undo()
}
// 恢复
const redo = () => {
  command.value.redo()
}
// 重做
const restart = () => {
  canUndo.value = false
  canRedo.value = false
  command.value.clear()
  createNewDiagram(editor.value.processEngine)
}

EventEmitter.on('modeler-init', (modeler) => {
  command.value = modeler.get('commandStack')
})
</script>

<template>
  <div class="button-group">
    <el-tooltip effect="light" content="撤销" placement="bottom" :hide-after="100">
      <div :class="['item-button', canUndo ? '' : 'disabled']" @click="undo"><svg-icon icon="ri:arrow-go-back-line"></svg-icon></div>
    </el-tooltip>
    <el-tooltip effect="light" content="恢复" placement="bottom" :hide-after="100">
      <div :class="['item-button', canRedo ? '' : 'disabled']" @click="redo"><svg-icon icon="ri:arrow-go-forward-line"></svg-icon></div>
    </el-tooltip>
    <el-tooltip effect="light" content="清除重做" placement="bottom" :hide-after="100">
      <div class="item-button" @click="restart"><svg-icon icon="ri:eraser-line"></svg-icon></div>
    </el-tooltip>
  </div>
</template>

<style scoped lang="scss">
.button-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 2px 2px 3px;
  border-right: 1px solid var(--el-border-color-lighter);

  .item-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 2px;
    border-radius: 2px;
    cursor: pointer;

    &.disabled {
      cursor: not-allowed;

      .el-icon {
        color: var(--el-text-color-disabled);
      }

      &:hover {
        background-color: transparent;

        .el-icon {
          color: var(--el-text-color-disabled);
        }
      }
    }

    &:hover {
      background-color: var(--el-color-primary-light-9);

      .el-icon {
        color: var(--el-color-primary);
      }
    }

    .el-icon {
      font-size: 20px !important;
    }
  }
}
</style>
